<template>
<!--html文本-->
   <div>
      <p class="red"> {{msg}}</p>
      <button @click="sub(1,5)">点击</button>
     <!-- <a href="#">登录</a>
      <a href="#">注册</a>-->
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-view></router-view>
      <!--使用mintt-uid button组件-->
      <mt-button @click="tip" type="danger" size="large">danger</mt-button>
      <div class="mui-content">
         <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
               <span class="mui-icon mui-icon-home"></span>
               <div class="mui-media-body">Home</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
               <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
               <div class="mui-media-body">Email</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
               <span class="mui-icon mui-icon-chatbubble"></span>
               <div class="mui-media-body">Chat</div></a></li>
           </ul>
      </div>
      <!--mui的图文表格-->
      <ul class="mui-table-view">
         <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
               <img class="mui-media-object mui-pull-left" src="http://localhost:63342/webpack/%E8%B5%84%E6%96%99/mui/examples/hello-mui/images/shuijiao.jpg">
               <div class="mui-media-body">
                  幸福
                  <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
               </div>
            </a>
         </li>
         <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
               <img class="mui-media-object mui-pull-left" src="http://localhost:63342/webpack/%E8%B5%84%E6%96%99/mui/examples/hello-mui/images/shuijiao.jpg">
               <div class="mui-media-body">
                  木屋
                  <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
               </div>
            </a>
         </li>
         <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
               <img class="mui-media-object mui-pull-left" src="http://localhost:63342/webpack/%E8%B5%84%E6%96%99/mui/examples/hello-mui/images/shuijiao.jpg">
               <div class="mui-media-body">
                  CBD
                  <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
               </div>
            </a>
         </li>

      </ul>
   </div>
</template>
<script>
   import {substrict} from './calc.js';
   import {Toast} from 'mint-ui';
   function add(x,y) {
       console.log(x + y);
   }
//负责导出.vue这个对象 ES6语法结构
    export default{
        data () {
            return {
                msg:'hello vue.js'
            }
        },
        methods:{
            add,
            //add1:calc.add,
            sub:substrict,
            tip:function () {
                Toast('您好')
            }
        },
    }
</script>
<!--当前css代码只在这个组建中生效---->
<style scoped>
.red{
    color:red;
}

</style>